@import "./variables";

//  全局样式
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  // font-family: Arial, Helvetica, sans-serif;
  font-family: MicrosoftYaHei;
  line-height: 1.2em;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}

a {
  color: #343440;
  text-decoration: none;
}

.clearfix {
  &::after {
    content: "";
    display: table;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }
}

//浮动
.float-r {
  float: right;
}

//浮动
.float-l {
  float: left;
}

// 字体加粗
.fw-b {
  font-weight: bold;
}

//文章一行显示，多余省略号显示
.title-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-color-black {
  background-color: rgba(19, 25, 47, 0.6);
}

.bg-color-blue {
  background-color: #1a5cd7;
}

.colorBlack {
  color: #272727 !important;

  &:hover {
    color: #272727 !important;
  }
}

.colorGrass {
  color: #33cea0;

  &:hover {
    color: #33cea0 !important;
  }
}

.colorRed {
  color: #ff5722;

  &:hover {
    color: #ff5722 !important;
  }
}

.colorText {
  color: #d3d6dd !important;

  &:hover {
    color: #d3d6dd !important;
  }
}

.colorBlue {
  color: #257dff !important;

  &:hover {
    color: #257dff !important;
  }
}

//颜色
@each $colorkey, $color in $colors {
  .text-#{$colorkey} {
    color: $color;
  }

  .bg-#{$colorkey} {
    background-color: $color;
  }
}

//对齐
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

//flex
@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

//字体
@each $fontkey, $fontvalue in $font-sizes {
  .fs-#{$fontkey} {
    font-size: $fontvalue * $base-font-size;
  }
}

//.mt-1 => margin top
//spacing

@each $typekey, $type in $spacing-types {
  //.m-1
  @each $sizekey, $size in $spacing-sizes {
    .#{$typekey}-#{$sizekey} {
      #{$type}: $size * $spacing-base-size;
    }
  }

  //.mx-1
  @each $sizekey, $size in $spacing-sizes {
    .#{$typekey}x-#{$sizekey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }

    .#{$typekey}y-#{$sizekey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }

  //.mt-1
  @each $directionkey, $direction in $spacing-directions {
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}#{$directionkey}-#{$sizekey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }

  .#{$typekey} {
    #{$type}: 0;
  }
}


// elementUI 时间选择器样式修改
 .el-date-editor{
  width: 100% !important;
 
 
}
.el-input__inner{
  border:none !important;
}
.el-date-editor,.el-range-input{
  background: #1f2463 !important;
  color: rgb(52, 239, 254)!important;
  font-size:16px !important;
  ::placeholder,.el-range-separator{
    color: rgb(52, 239, 254)!important;
  }
  .el-range-separator{
    width: 7%!important;
  }
}
.el-picker-panel {
  background: #1f2463 !important;
  color: #fff!important;
  border: 1px solid #93bee7 !important;
  line-height: 20px;

  .el-date-range-picker__time-header {
    border-bottom: 1px solid #93bee7 !important;
  }

  .el-picker-panel__icon-btn {
    width: 8px;
    height: 10px;
    color: #cbd3f0 !important;
  }

   .el-input__inner {
    background-color: #19466f;
    border: #75ebf2;
    color: #e8fdff;
  }

  .el-date-picker__header-label {
    color: #6ce6cb !important;
  }

  .el-date-picker__header-label:hover {
    color: #ffffff;
  }

  .el-date-table td.disabled div {
    background-color: #1f2463 !important;
  }

  .el-date-table th {
    color: #c3e3ec;
  }

  .el-date-table td.available {
    font-size: 16px;
    font-weight: bold;
    color: #6ce6cb;
  }

  .el-date-table td.available:hover {
    color: #ffffff;
  }
}
// .el-picker-panel{
//   // border: none !important;
//   .el-picker-panel__body{
//       background: #080839; 
//       color: #adadbd;
//     }
//   }
//   .el-picker-panel__icon-btn{
//     color: #adadbd !important;
//   }

//   .in-range{ //选中 td
//     // background-color: #34effe;
//     div{ //选中盒子 div
//       background-color: #34effe !important;
//       .cell{ //选中内层 a
//         // background-color: #171745 !important;
//       }
//     }
//   }
.el-checkbox__inner{
  background-color: transparent!important;
  border-color:#42c6dd!important;
}
.el-checkbox__label{
  color: #fff!important;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #fff!important;
}